{% extends "base.html" %}
{% block content %}
<div id="dataApp">
    <div class="input-group col-md-3" style="margin-top:0px; margin-left: 75%; position:relative">
        <el-button type="primary" @click="dialogVisible = true" style="margin-right: 10px">插入数据</el-button>
        <el-input 
            v-model="searchKey" 
            placeholder="请输入要搜索的内容" 
            style="width: 200px; margin-right: 10px">
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- Element UI的对话框 -->
    <el-dialog title="插入新数据" :visible.sync="dialogVisible" width="50%">
        <el-form :model="form" ref="form" label-width="100px">
            <el-form-item label="职位" prop="titles">
                <el-input v-model="form.titles"></el-input>
            </el-form-item>
            <el-form-item label="公司" prop="company">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item label="公司人数" prop="compScale">
                <el-input v-model="form.compScale"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="form.city"></el-input>
            </el-form-item>
            <el-form-item label="区域" prop="area">
                <el-input v-model="form.area"></el-input>
            </el-form-item>
            <el-form-item label="最低薪资/月" prop="min_salary">
                <el-input-number 
                    v-model="form.min_salary"
                    :min="1000"
                    :step="1000"
                    :step-strictly="true">
                </el-input-number>
            </el-form-item>
            <el-form-item label="最高薪资/月" prop="max_salary">
                <el-input-number 
                    v-model="form.max_salary"
                    :min="1000"
                    :step="1000"
                    :step-strictly="true">
                </el-input-number>
            </el-form-item>
            <el-form-item label="发布日期" prop="date">
                <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="详情页链接" prop="content_link">
                <el-input v-model="form.content_link"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 数据表格 -->
    <table class="table table-bordered">
        <tr>
            <th>职位</th>
            <th>公司</th>
            <th>公司人数</th>
            <th>城市</th>
            <th>区域</th>
            <th>最低薪资/月</th>
            <th>最高薪资/月</th>
            <th>发布日期</th>
            <th>招聘信息详情页</th>
        </tr>
        {% for a in datas.items %}
            <tr>
                <td>{{ a.titles }}</td>
                <td>{{ a.company }}</td>
                <td>{{ a.compScale }}</td>
                <td>{{ a.city }}</td>
                <td>{{ a.area }}</td>
                <td>{{ a.min_salary }}</td>
                <td>{{ a.max_salary }}</td>
                <td>{{ a.date }}</td>
                <td><a href={{ a.content_link }} target="_blank">{{ a.content_link }}</a></td>
            </tr>
        {% endfor %}
    </table>


    <div style="text-align: center">
        <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">

            {% if datas.has_prev %}
                <li class="page-item">
           <a class="page-link" href="/list?page={{ datas.prev_num }}" aria-label="Previous">
               <span aria-hidden="true">&laquo;</span>
               <span class="sr-only">Previous</span>
           </a>
       </li>
            {% endif %}

            {% for i in datas.iter_pages() %}
                {% if i == None %}
                    <li class="page-item"><a class="page-link" href="#">...</a></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="/list?page={{ i }}&key={{ key }}">{{ i }}</a></li>
                {% endif %}
            {% endfor %}

            {% if datas.has_next %}
                <li class="page-item">
           <a class="page-link" href="/list?page={{ datas.next_num }}&key={{ key }}" aria-label="Next">
               <span aria-hidden="true">&raquo;</span>
               <span class="sr-only">Next</span>
           </a>
       </li>
            {% endif %}
        </ul>
        </nav>
        当前页数：{{ datas.page }}
        总页数：{{ datas.pages }}
        一共有{{ datas.total }}条数据
        <br>
    </div>

<script>
new Vue({
    el: '#dataApp',
    data() {
        return {
            dialogVisible: false,
            searchKey: '',
            form: {
                titles: '',
                company: '',
                compScale: '',
                city: '',
                area: '',
                min_salary: 0,
                max_salary: 0,
                date: '',
                content_link: ''
            }
        }
    },
    methods: {
        handleSearch() {
            window.location.href = `/list?key=${this.searchKey}`;
        },
        submitForm() {
            const formData = new FormData();
            Object.keys(this.form).forEach(key => {
                let value = this.form[key];
                if (key === 'date' && value) {
                    value = value.toISOString().split('T')[0];
                }
                formData.append(key, value);
            });

            fetch('/insert_data', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    this.$message.success('插入成功');
                    this.dialogVisible = false;
                    window.location.reload();
                } else {
                    this.$message.error('插入失败');
                }
            })
            .catch(error => {
                this.$message.error('发生错误');
                console.error('Error:', error);
            });
        }
    }
})
</script>
{% endblock %}